<template>
    <div class="enter-work-chat-detail">
        <div class="chat-detail-content-view">
            <span class="fs16">
                <span>沟通详情</span>
                <a class="pull-right" @click="$router.back()">返回</a>
<!--                <router-link class="pull-right" :to="`/talent-detail?id=${chatInfo.resumeId}`">返回</router-link>-->
            </span>
            <div class="mt15">
                <span class="mr15">{{chatInfo.accountName}}</span>
                <span>{{chatInfo.positionName}}</span>
            </div>
            <div class="mt20">
                <el-input placeholder="请输入聊天内容，按回车键发送" v-model="content" class="input-with-select" @keyup.enter.native="sendMsg" style="width: 300px">
                </el-input>
                <el-button type="primary" slot="append" icon="el-icon-s-promotion" @click="sendMsg" class="ml15">发送</el-button>
            </div>
            <el-table
                class="mt15"
                :data="list"
                style="width: 100%"
                size="small"
                row-class-name="chat-list"
                cell-class-name="chat-list-cell"
            >
                <el-table-column
                    prop="content"
                    label="发件人">
                    <template slot-scope="scope">
                        <span v-if="scope.row.companyId">我</span>
                        <span v-else>{{ chatInfo.accountName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="content"
                    label="消息内容">
                    <template slot-scope="scope">
                        {{scope.row.content}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="time"
                    align="right"
                    label="时间">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import {filesAnon} from '@/api/base'
import {getAuthenticationStatus, submitBusinessLicense} from '@/api/enterprise/work/account'
import {checkResponse} from '@/utils'
import {buildMsgRoom, chatList, sendMsg} from "../../../api/base";
import moment from "moment";

export default {
    name: 'enterpriseWorkChatDetail',
    components: {},
    data() {
        return {
            id: 0,
            content: '',
            list: [],
            chatInfo: {}
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            console.log(this.$route.query)
            this.chatInfo = this.$route.query;
            buildMsgRoom(this.$route.query).then(res => {
                this.id = res.datas.id
                this.getList();
            });
            this.getAuthenticationStatus()
        },
        getList(reload) {
            if (reload) {
                this.requestData.page = 1
            }
            let obj = Object.assign({...this.requestData})
            obj.msgId = this.id
            chatList(obj).then(res => {
                let data = res.datas;
                let list = []
                data.forEach(v=>{
                    list.push(v);
                    // list.unshift(v);
                    v.time = v.updateTime ? moment(v.updateTime).format('YYYY-MM-DD HH:mm:ss') : ''

                })
                this.list = list
                this.pagination.total = res.count
                this.requestData.page++
            })
        },
        sendMsg() {
            if (!this.content) {
                this.$message.error('请输入聊天内容');
                return false;
            }
            sendMsg({msgId: this.id, content: this.content}).then(res => {
                this.content = '';
                this.getList();
            });
        },
        getAuthenticationStatus() {
            getAuthenticationStatus().then(res => {
                this.status = res.datas.auditStatus + 2
            })
        },
    }
}
</script>
<style lang="scss">
@import "../../../assets/styles/enterprise/base";

.enter-work-chat-detail {
    background: #FFF;
    padding: 10px 20px;

    .chat-detail-content-view {
        margin: auto;

        .setps {
            margin: 55px 0 40px 120px;
        }

        .chat-detail-form {
            padding-right: 40px;
            position: relative;
            color: $text-default;

            .enterprise-tag {
                display: block;
                margin: 10px 0 30px 0;
            }

            .el-form-item__label {
                color: $text-default !important;
            }

            .checkbox-item {
                .el-form-item__content {
                    margin-left: 0 !important;
                }
            }

            .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }

            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }

            .avatar-uploader-icon {
                font-size: 16px;
                color: #8c939d;
                width: 80px;
                height: 80px;
                line-height: 80px;
                text-align: center;
            }

            .avatar {
                width: 80px;
                height: 80px;
                display: block;
            }
        }

        .status-content {
            text-align: center;
            margin-top: 80px;
            margin-bottom: 150px;

            img {
                width: 74px;
                margin-bottom: 20px;
            }
        }
        .chat-list-cell{
            //border-bottom: 0;
        }
        .el-table--enable-row-hover .el-table__body tr:hover>td{
            //background-color: #FFF;
        }

        .el-table--group::after, .el-table--border::after, .el-table::before{
            //background: #FFF;
        }
    }
}
</style>
